<template>
  <div class="paymmented">
    <div class="paymmented-box">
      <span class="paymmented-tips"></span>
      <div class="paymmented-type">
        <span class="paymmented-tittle" >小区名称</span>
        <div class="paymmented-house">
          <span v-if="message&&message.residential&&message.residential.name">{{message.residential.name}}</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">缴费类型</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message&&message.type&&message.type.name'>{{message.type.name}}</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">缴费金额</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.cost'>{{message.cost}}元</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">表读数</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.quantity_meter'>{{message.quantity_meter}}</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">使用量</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.usage_quantity'>{{message.usage_quantity}}<span v-if="message.usage_quantity!=0">{{message.type.usage_unit}}</span> </span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">缴费日期</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.finishtime_text'>{{message.finishtime_text}}</span>
          <span v-else>长期有效</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    message:{
      type:Object
    }
  },
  data(){
    return{

    }
  }
}
</script>

<style scoped>
.paymmented{
  margin: 0 .5rem .5rem;
}
.paymmented-box{
  border-bottom: 0.04rem solid #979797;
  padding-bottom: .5rem;
}
.paymmented-box .paymmented-tips{
  display: block;
  margin: .3rem 0;
  font-size: .32rem;
  color: #000;
}
.paymmented-type{
  text-indent: .3rem;
}
.paymmented-tittle{
  color: #57c5c6;
  height: .5rem;
  display: block;
  font-weight: bold;
}
.paymmented-house{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: .5rem;
  font-weight: bold;
}
.paymmented-Prescription{
  margin-top: .5rem;
}
</style>
